<script setup lang="ts">
import { reactive, ref, Ref, watch, nextTick, onMounted } from "vue";
import { Delete, MoreFilled, Refresh } from "@element-plus/icons-vue";
import mittBus from "@/utils/mittBus";
import messageMessageServiceApi from "@/api/modules/message/bean/message";
import { ExportWorkFlowServiceApi } from "@/api/modules/workflow/bean/work-todo";
import workFlowWorkflowServiceApi from "@/api/modules/workflow/bean/workflow";
import { useUserStore } from "@/stores/modules/user";
import { SYSTEM_CONFIG } from "@/config/system";
import { redirectPath } from "@/utils/router-kit";
import { messageSuccessTip } from "@/utils/message-config";

const useStore = useUserStore();

const messageBoxState = reactive({
  drawerVisible: false,
  pendList: [] as any[],
  pendCount: 0,
  msgList: [] as any[],
  msgCount: 0,
  /**当前活跃的tab标签值 */
  activeName: "msg",
  loadMsgList() {
    messageMessageServiceApi.queryList({}, { unReaded: 1 }).then(res => {
      messageBoxState.msgList = res.data;
      messageBoxState.msgCount = res.data.length;
      messageBoxState.changeNoticeCount();
    });
  },
  loadPendList() {
    ExportWorkFlowServiceApi.getPageTodoList({ rows: 500 }).then(res => {
      messageBoxState.pendList = res.data.rows;
      messageBoxState.pendCount = res.data.rows.length;
      messageBoxState.changeNoticeCount();
    });
  },
  changeNoticeCount() {
    // console.log("changeNoticeCount");
    mittBus.emit("changeNoticeCount", messageBoxState.msgCount + messageBoxState.pendCount);
  },
  /**刷新按钮 */
  refreshNews: () => {
    if (messageBoxState.activeName === "msg") {
      messageBoxState.loadMsgList();
    } else if (messageBoxState.activeName === "pend") {
      //emit('refreshNews', 'pend');
      messageBoxState.loadPendList();
    }
  },
  /**查看更多*/
  seeMore: () => {
    if (messageBoxState.activeName === "msg") {
      //   redirectPath('/org/message-service/index');
    } else if (messageBoxState.activeName === "pend") {
      // 代办
      //   redirectPath('/work/work-todo-service/index');
    }
  },
  /**点击跳转到对应页面 */
  themeClick: (row: any) => {
    console.log(row);
    if (messageBoxState.activeName === "msg") {
      // 表示消息页
      //   redirectPath(row.url);
    } else if (messageBoxState.activeName === "pend") {
      //   redirectPath(row.formUrl); // 代办
    }
  },
  clearMessage() {
    messageMessageServiceApi.setAllRead().then(res => {
      messageSuccessTip("消息已清空");
      messageBoxState.loadMsgList();
    });
  }
});

onMounted(() => {
  messageBoxState.loadMsgList();
  messageBoxState.loadPendList();
});

mittBus.on("openMessageDrawer", () => {
  messageBoxState.drawerVisible = true;
});
</script>

<template>
  <el-drawer
    v-model="messageBoxState.drawerVisible"
    :size="420"
    class="jxtech-message-drawer"
    modal-class="jxtech-message-drawer-modal"
  >
    <template #header>
      <div class="jxtech-msg-box-header">
        <span> 消息管理</span>
        <span>
          <el-button
            class="message-btn"
            type="info"
            link
            :icon="Delete"
            v-if="messageBoxState.activeName === 'msg'"
            @click="messageBoxState.clearMessage"
          >
            清空消息
          </el-button>
          <el-button class="message-btn" type="info" link :icon="MoreFilled" @click="messageBoxState.seeMore">
            查看更多
          </el-button>
          <el-button class="message-btn" type="info" link :icon="Refresh" @click="messageBoxState.refreshNews">刷新 </el-button>
        </span>
      </div>
    </template>
    <template #default>
      <el-tabs type="card" stretch v-model="messageBoxState.activeName">
        <el-tab-pane name="msg">
          <template #label>
            <div>
              消息提示（<span style="color: red"> {{ messageBoxState.msgCount }} </span>）
            </div>
          </template>
          <div class="jxtech-msg-item-box">
            <div
              class="jxtech-msg-item pointer"
              v-for="msgItem in messageBoxState.msgList"
              :key="msgItem.procinstNodeId"
              @click="messageBoxState.themeClick(msgItem)"
            >
              <div class="jxtech-msg-item-title">
                <span class="jxtech-msg-item-theme as-link" :title="msgItem.title">
                  {{ msgItem.title }}
                </span>
              </div>
              <div class="jxtech-msg-item-info">
                <div class="jxtech-msg-item-info-tag">
                  <el-tag size="small" type="info">{{ msgItem.messageType }}</el-tag>
                </div>
                <span class="jxtech-msg-item-info-time">{{ msgItem.createTime }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="messageBoxState.msgList.length === 0" description="未查询到新的消息"></el-empty>
          <div v-else class="no-more-text">没有更多了</div>
        </el-tab-pane>
        <el-tab-pane name="pend">
          <template #label>
            <div>
              待办任务（<span style="color: red"> {{ messageBoxState.pendCount }} </span>）
            </div>
          </template>
          <div class="jxtech-msg-item-box">
            <div
              class="jxtech-msg-item pointer"
              v-for="pendItem in messageBoxState.pendList"
              :key="pendItem.procinstNodeId"
              @click="messageBoxState.themeClick(pendItem)"
            >
              <div class="jxtech-pend-item-title">
                <span class="jxtech-msg-item-theme as-link" :title="pendItem.procinstName">
                  {{ pendItem.name }}
                </span>
              </div>
              <div class="jxtech-pend-item-info">
                <div class="jxtech-msg-item-info-tag">
                  <el-tag size="small" type="info">{{ pendItem.taskName }}</el-tag>
                </div>
                <span class="jxtech-msg-item-info-time">{{ pendItem.createTime }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="messageBoxState.pendList.length === 0" description="未查询到代办任务"></el-empty>
          <div v-else class="no-more-text">没有更多了</div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template #footer></template>
  </el-drawer>
</template>

<style lang="scss">
@import url("./index.scss");
</style>
